<template>
	<view class="wrap">
		
		
		
		<view class="ipt-wrap">
			<view class="label">
				真实姓名
			</view>
			<view class="right">
				 <input v-model="name"  type="text" placeholder="请输入真实姓名" />
			</view>
			
		</view>
		<view class="ipt-wrap">
			<view class="label">
				身份证号
			</view>
			<view class="right">
				 <input v-model="id_card"  type="text" placeholder="请输入身份证号" />
			</view>
			
		</view>
		<view class="ipt-wrap">
			<view class="label">
				手机号
			</view>
			<view class="right">
				 <input v-model="phone"  type="text" placeholder="请输入手机号" />
			</view>
			
		</view>
		<view class="ipt-wrap bold-border">
			<view class="label">
				银行卡账号（储蓄卡）
			</view>
			<view class="right">
				 <input v-model="bankcard"  type="text" placeholder="请输入银行卡账号" />
			</view>
			
		</view>
		
		<view class="title-bold">
			-请拍摄并上传-
		</view>
		
		<view class="img-wrap">
			<view class="img-item">
				<view class="img" @click="chooseImg('front_card')">
					<image v-show="!front_card" src="../../static/shenfenzhengzhengmian.png" mode=""></image>
					<image v-show="front_card" :src="front_card" mode=""></image>
				</view>
				<view class="desc">
					上传正面照片
				</view>
			</view>
			<view class="img-item">
				<view class="img" @click="chooseImg('back_card')">
					<image v-show="!back_card" src="../../static/shenfenzhengfanmian.png" mode=""></image>
					<image v-show="back_card" :src="back_card" mode=""></image>
					
				</view>
				<view class="desc">
					上传反面照片
				</view>
			</view>
		</view>
		
		
		<view class="note-wrap">
			<view class="note-item" v-for="(item,index) in note" :key="index">
				{{item}}
			</view>
		</view>
		<view class="next" @click="subData" v-if="status==1">
			提交认证
		</view>
		<view class="next" @click="subData" v-if="status==2">
			更改
		</view>
		
		<view class="next gray"  v-if="status==4">
			审核中
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				status:1,
				bankcard:'',
				id_card:'',
				name:'',
				front_card:'',
				back_card:'',
				phone:'',
				note:[]
			}
		},
		onLoad() {
             this.geData()  
		},
		methods: {
			chooseImg(type){
				
				let that=this
				if(that.status==3||that.status==4){
					return
				}
				uni.chooseImage({
					count:1,
					sizeType:'compressed',
					success: (res) => {
						const imgsFile=res.tempFilePaths
						uni.showLoading({
						    title: '正在上传'
						});
						const uper=uni.uploadFile({
							url: that.upUrl+'/api/user/upimg_stock_sign',
							filePath:imgsFile[0],
							name:'img',
							header:{  
								"Authorization": uni.getStorageSync("auth_token")
							},
							success:function(res){
								
								
								let data=JSON.parse(res.data)
								if(data.Code=='10200'){
									
									uni.showToast({
										title: "上传成功",
										icon: "none",
										duration:4000,
									});
									uni.hideLoading();
									that[type]=data.Data
									
									
									
								}
							}
						})
						//上传进度更新的方法
						// uper.onProgressUpdate((e)=>{
						// 	if(e.progress==100){
								
								
						// 	}else{
								
						// 	}
							
						// })
					}
				})
			
			},
			geData(){
				let that=this
				that.apiget('/api/user/get_stock_sign').then(res => {
					if(res.Code==10200){
						
						that.note=res.Data.note
						that.front_card=res.Data.front_card
						that.phone=res.Data.phone
						that.back_card=res.Data.back_card
						that.name=res.Data.name
						that.id_card=res.Data.id_card
						that.bankcard=res.Data.bankcard
						that.status=res.Data.status
					}
					
				}).catch(err=>{
					console.log(err)
				});
			},
			subData(){
				let that=this
				if(this.name==''){
					uni.showToast({
					    title: '请输入真实姓名',
					    duration:4000,
						icon:'none'
					});
					return
				}
				if(this.id_card==''){
					uni.showToast({
					    title: '请输入身份证号',
					    duration:4000,
						icon:'none'
					});
					return
				}
				if(this.phone==''){
					uni.showToast({
					    title: '请输入手机号',
					    duration:4000,
						icon:'none'
					});
					return
				}
				if(this.bankcard==''){
					uni.showToast({
					    title: '请输入银行卡号',
					    duration:4000,
						icon:'none'
					});
					return
				}
				if(this.front_card==''){
					uni.showToast({
					    title: '请上传身份证正面',
					    duration:4000,
						icon:'none'
					});
					return
				}
				if(this.back_card==''){
					uni.showToast({
					    title: '请上传身份证反面',
					    duration:4000,
						icon:'none'
					});
					return
				}
				
			    uni.showModal({
			    	title: '提示',
			    	content: '确认提交？',
			    	success: function (res) {
			    		if (res.confirm) {
			    			that.apipost('/api/user/submit_stock_sign',{
			    				bankcard:that.bankcard,
			    				id_card:that.id_card,
			    				name:that.name,
			    				front_card:that.front_card,
			    				back_card:that.back_card,
			    				phone:that.phone
			    				
			    				
			    			},true).then(res => {
			    				if(res.Code==10200){
			    					
			    					uni.showToast({
			    					    title: res.Message,
			    					    duration:4000,
			    						icon:'none'
			    					});
			    					
			    				}
			    				
			    			}).catch(err=>{
			    				console.log(err)
			    			});	
			    				
			    		} else if (res.cancel) {
			    			console.log('用户点击取消');
			    		}
			    	}
			    });
			}
		}
	}
</script>

<style>
	.next{
		
		background:#f9436b;
		color:#fff;
		width:668rpx;
		margin:0 auto;
		display:flex;
		justify-content: center;
		align-items: center;
		height:80rpx;
		margin-top:60rpx;
		border-radius:12rpx;
	}
	.gray{
		background:gray;
	}
	.title-bold{
		text-align:center;
		padding-top:18rpx;
		color:#5e5e5e;
	}
	
	.ipt-wrap .label{
		width:180rpx;
	}
	.ipt-wrap .right{
		flex:1;
	}
	.right input{
		height:100%;
	}
	.img-wrap{
		padding-top:20rpx;
		width:604rpx;
		margin:0 auto;
		display:flex;
		text-align:center;
		margin-bottom:18rpx;
	}
	.note-wrap{
		padding-top:80rpx;
		width:604rpx;
		margin:0 auto;
	}
	.img-item{
		
		flex:1;
	}
	.img-item .img{
		height:180rpx;
		
		text-align:center;
		width:96%;
	}
	.ipt-wrap{
		
		display:flex;
		align-items: center;
		width:664rpx;
		margin:0 auto;
		
		padding:30rpx 0;
		border-bottom:1rpx solid #e8e8e8
	}
	
	.bold-border{
		border-bottom:10rpx solid #e8e8e8
	}

	/* .name-wrap{
		border-bottom:1rpx solid #e8e8e8
	} */
	.wrap{
		background:#eeeeee;
		min-height:100%;
	}
	.tips{
		color:#333;
		line-height:70rpx;
		background:#eeeeee;
		padding:34rpx 44rpx 34rpx 30rpx;
	}
</style>
